<template>
  <div class="friend-box">
    <div class="user-search">
      <el-input type="text" placeholder="搜索" />
    </div>
    <el-scrollbar>
      <user_friend_item
        class="user-box-item"
        v-for="item in userList"
        :user="item"
        @toChat="toChat(item)"
        @addFriend="addFriend(item)"
      ></user_friend_item>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import ChatUserApi from "@/api/chat/chatUser";
import ChatFriendApi from "@/api/chat/friend";
import { AddChatFriend, ChatFriend } from "@/api/chat/friend/model";

const userList = ref<ChatFriend[]>([]);

onMounted(() => {
  query();
});

const query = async () => {
  const { dataList } = await ChatFriendApi.query();
  userList.value = dataList;
};

/** 发消息 */
const toChat = async (user: ChatFriend) => {
  const { success, message, data } = await ChatUserApi.create(user.friendId);
  if (success) {
    emits("toChat", data);
  } else {
    ElNotification.error(message);
  }
};

//添加好友
const addFriend = async (friend: AddChatFriend) => {
  const { success } = await ChatFriendApi.create(friend);
  if (success) {
    await query();
  }
};

const emits = defineEmits(["toChat"]);
</script>

<style scoped lang="scss">
.friend-box {
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #dadbdd;
  width: var(--left-width);
  display: flex;
  flex-direction: column;
}
.user-search {
  height: var(--header-height);
  background-color: #e5e4e400;
  line-height: 50px;
  padding: 0px 10px;
}
.user-box-item {
  width: 100%;
  cursor: pointer;

  &:hover:not(.el-button, .el-button *) {
    background-color: #d8d7d7;
  }
}
</style>
